<template>
    <ClientOnly>
        <popup
            :show="visible"
            width="900px"
            title="选择MCP"
            tips="建议只选择与业务相关的MCP"
            @close="emits('close')"
            @confirm="emits('confirm', selected)"
        >
            <div class="flex h-[460px]">
                <div class="w-[220px] border-r border-br-extra-light">
                    <el-scrollbar>
                        <div class="p-4">
                            <div
                                v-for="(item, index) in selected"
                                :key="index"
                                class="knowledge active"
                            >
                                <photos width="28px" height="28px" radius="6px" :src="item.logo" />
                                <div class="flex-1 ml-2">
                                    <p class="text-base">{{ item.name }}</p>
                                </div>
                                <icon name="el-icon-Delete" @click="handleDeleteMcp(index)" />
                            </div>
                            <el-empty
                                v-if="selected.length <= 0"
                                :image-size="80"
                                description="请选择"
                            />
                        </div>
                    </el-scrollbar>
                </div>
                <div class="flex-1">
                    <el-scrollbar>
                        <div class="grid gap-x-4 grid-cols-2 p-4">
                            <div
                                v-for="(item, index) in unselected"
                                :key="index"
                                class="knowledge"
                                @click="handleClickMcp(index)"
                            >
                                <photos width="46px" height="46px" radius="6px" :src="item.logo" />
                                <div class="flex-1 ml-2">
                                    <p class="text-base">{{ item.name }}</p>
                                    <p class="text-xs text-tx-placeholder mt-px">
                                        {{ item.code }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <el-empty
                            v-if="unselected.length <= 0"
                            :image-size="120"
                            description="空空如也~"
                        />
                    </el-scrollbar>
                </div>
            </div>
        </popup>
    </ClientOnly>
</template>

<script setup lang="ts">
import mcpClientApi from '~/api/agent/mcp/client'

const emits = defineEmits(['confirm', 'close'])
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    bot: {
        type: String,
        default: ''
    },
    knows: {
        type: Array,
        default: () => {
            return []
        }
    }
})

const visible = ref<boolean>(false)
const selected = ref<McpWholeResponse[]>([])
const unselected = ref<McpWholeResponse[]>([])

const queryKnowList = async () => {
    unselected.value = await mcpClientApi.whole(props.bot)
    props.knows.forEach((kb: any) => {
        for (let i = 0; i < unselected.value.length; i++) {
            if (kb.code === unselected.value[i].code) {
                selected.value.push(unselected.value[i])
                unselected.value.splice(i, 1)
                break
            }
        }
    })
}

const handleClickMcp = (index: number) => {
    selected.value.push(unselected.value[index])
    unselected.value.splice(index, 1)
}

const handleDeleteMcp = (index: number) => {
    unselected.value.push(selected.value[index])
    selected.value.splice(index, 1)
}

watch(
    () => props.show,
    async (val) => {
        visible.value = val
        if (val) {
            selected.value = []
            await queryKnowList()
        }
    }
)
</script>

<style scoped lang="scss">
.knowledge {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid var(--el-border-color-light);
    border-radius: 8px;
    &:hover {
        cursor: pointer;
        background-color: var(--el-bg-color-page);
        box-shadow: var(--el-box-shadow-light);
    }
    .el-icon:hover {
        color: var(--el-color-error);
        cursor: pointer;
    }
    &.active {
        cursor: default;
        background-color: var(--el-color-primary-light-9);
        border-color: var(--el-border-color-extra-light);
    }
}
</style>
